import seaborn as sns
import matplotlib.pyplot as plt
from dash import Dash, dcc, html
from dash.dependencies import Input, Output, State

from src.common.utils.wraper_fig import wraper_fig
from src.core.stu_persona.stu_info import stu_info
from src.core.stu_persona.teacher_data import teacher_info
from src.core.stu_persona.grade_fig import grade_fig
from src.core.stu_persona.attendance_fig import attendance_fig
from src.core.stu_persona.comsumption_fig import comsumption_fig, consumption_predict_fig
from src.common.descriptors.stu_desc_lib import StuDescribe

def create_layout():
    return html.Div(
        children=[
            html.Header([
                html.H1('🎓 学生画像分析', 
                       style={'color': '#2c3e50', 'marginBottom': '20px'}),
                html.Div([
                    dcc.Input(
                        id='input-id',
                        type='text',
                        placeholder='请输入学生ID...',
                        debounce=True,
                        style={
                            'flex': 1,
                            'padding': '12px',
                            'border': '2px solid #3498db',
                            'borderRadius': '8px',
                            'fontSize': '16px'
                        }
                    ),
                    html.Button(
                        '查询学生 🔍',
                        id='submit-button',
                        n_clicks=0,
                        style={
                            'marginLeft': '10px',
                            'padding': '12px 24px',
                            'backgroundColor': '#3498db',
                            'color': 'white',
                            'border': 'none',
                            'borderRadius': '8px',
                            'cursor': 'pointer',
                            'transition': 'all 0.3s',
                            ':hover': {
                                'backgroundColor': '#2980b9',
                                'transform': 'scale(1.05)'
                            }
                        }
                    )
                ],
                    style={
                        'display': 'flex',
                        'maxWidth': '800px',
                        'margin': '0 auto',
                        'padding': '20px'
                    }
                )
            ],
                style={
                    'backgroundColor': '#f8f9fa',
                    'padding': '2rem',
                    'boxShadow': '0 2px 4px rgba(0,0,0,0.1)'
                }
            ),

            html.Main([
                html.Section([
                    html.H2('📝 基本信息', style={'color': '#34495e', 'marginBottom': '15px'}),
                    dcc.Loading(
                        id='user-info-loading',
                        type='circle',
                        children=html.Div(
                            id='user_info',
                            style={
                                'padding': '20px',
                                'backgroundColor': 'white',
                                'borderRadius': '8px',
                                'boxShadow': '0 2px 4px rgba(0,0,0,0.05)'
                            }
                        )
                    )
                ],
                    style={
                        'maxWidth': '1200px',
                        'margin': '20px auto',
                        'padding': '0 20px'
                    }
                ),

                html.Section([
                    html.H2('📊 成绩分析', style={'color': '#34495e', 'marginBottom': '15px'}),
                    dcc.Loading(
                        id='grade-info-loading',
                        type='circle',
                        children=html.Div(
                            html.Img(
                                id='grade-info',
                                style={
                                    'maxWidth': '100%',
                                    'height': 'auto',
                                    'objectFit': 'contain',
                                    'display': 'block',
                                    'margin': '0 auto'
                                }
                            ),
                            style={
                                'backgroundColor': 'white',
                                'padding': '20px',
                                'borderRadius': '8px',
                                'boxShadow': '0 2px 4px rgba(0,0,0,0.05)'
                            }
                        )
                    )
                ],
                    style={
                        'maxWidth': '1200px',
                        'margin': '20px auto',
                        'padding': '0 20px'
                    }
                ),

                html.Section([
                    html.H2('👨 教师信息', style={'color': '#34495e', 'marginBottom': '15px'}),
                    dcc.Loading(
                        id='teacher-info-loading',
                        type='circle',
                        children=html.Div(
                            id='teacher_info',
                            style={
                                'padding': '20px',
                                'backgroundColor': 'white',
                                'borderRadius': '8px',
                                'boxShadow': '0 2px 4px rgba(0,0,0,0.05)'
                            }
                        )
                    )
                ],
                    style={
                        'maxWidth': '1200px',
                        'margin': '20px auto',
                        'padding': '0 20px'
                    }
                ),

                html.Section([
                    html.H2('📅 考勤分析', style={'color': '#34495e', 'marginBottom': '15px'}),
                    dcc.Loading(
                        id='attendance-loading',
                        type='circle',
                        children=html.Div(
                            html.Img(
                                id='attendance_pie',
                                style={
                                    'maxWidth': '100%',
                                    'height': '300px',
                                    'objectFit': 'contain',
                                    'display': 'block',
                                    'margin': '0 auto'
                                }
                            ),
                            style={
                                'backgroundColor': 'white',
                                'padding': '20px',
                                'borderRadius': '8px',
                                'boxShadow': '0 2px 4px rgba(0,0,0,0.05)',
                                'textAlign': 'center'
                            }
                        )
                    )
                ],
                    style={
                        'maxWidth': '1200px',
                        'margin': '20px auto',
                        'padding': '0 20px'
                    }
                ),

                html.Section([
                    html.H2('💰 消费分析', style={'color': '#34495e', 'marginBottom': '15px'}),
                    html.Div([
                        html.Div(
                            dcc.Loading(
                                id='consumption-loading',
                                type='circle',
                                children=html.Div(
                                    html.Img(
                                        id='consumption-info',
                                        style={
                                            'maxWidth': '100%',
                                            'height': '300px', 
                                            'objectFit': 'contain', 
                                            'display': 'block',
                                            'margin': '0 auto'
                                        }
                                    ),
                                    style={
                                        'backgroundColor': 'white',
                                        'padding': '15px',
                                        'borderRadius': '8px',
                                        'boxShadow': '0 2px 4px rgba(0,0,0,0.05)'
                                    }
                                )
                            ),
                            style={'height': '100%'}
                        ),
                        html.Div(
                            dcc.Loading(
                                id='consumption-predict-loading',
                                type='circle',
                                children=html.Div(
                                    html.Img(
                                        id='consumption_predict',
                                        style={
                                            'maxWidth': '100%',
                                            'height': '300px',  
                                            'objectFit': 'contain', 
                                            'display': 'block',
                                            'margin': '0 auto'
                                        }
                                    ),
                                    style={
                                        'backgroundColor': 'white',
                                        'padding': '15px',
                                        'borderRadius': '8px',
                                        'boxShadow': '0 2px 4px rgba(0,0,0,0.05)'
                                    }
                                )
                            ),
                            style={'height': '100%'}
                        )
                    ],
                        style={
                            'display': 'grid',
                            'gridTemplateColumns': '1fr', 
                            'gap': '15px',
                            'alignItems': 'stretch'
                        }
                    )
                ],
                    style={
                        'maxWidth': '1200px',
                        'margin': '20px auto',
                        'padding': '0 20px'
                    }
                )
            ],
                style={
                    'padding': '20px 0',
                    'backgroundColor': '#ecf0f1'
                }
            )
        ],
        style={
            'fontFamily': 'Segoe UI, system-ui',
            'minHeight': '100vh',
            'backgroundColor': '#ecf0f1'
        }
    )

def register_callbacks(app):
    @app.callback(
        [
            Output('user_info', 'children'),
            Output(component_id='grade-info', component_property='src'),
            Output('teacher_info', 'children'),
            Output(component_id='consumption-info', component_property='src'),
            Output(component_id='attendance_pie', component_property='src'),
            Output(component_id='consumption_predict', component_property='src')
        ],
        [Input('submit-button', 'n_clicks')],
        [State('input-id', 'value')]
    )

    def update_dashboard(n_clicks, input_id):
        if input_id is None:
            return [
                html.Div(),
                "", 
                html.Div(), 
                "", 
                "", 
                ""
                ]
        
        ud = StuDescribe(stu_id=input_id)
        user_info = ud.filter_user_data()
        grade_data = ud.filter_average_grade_data()
        teacher_data = ud.filter_teacher_data()
        consumption_data = ud.filter_consumption_year_month_data()
        attendance_data = ud.filter_attendance_data()
        predict_cnsumption = ud.predict_consumption()

        
        return [
            stu_info(user_info), 
            wraper_fig(grade_fig(grade_data)), 
            teacher_info(teacher_data), 
            wraper_fig(comsumption_fig(consumption_data)), 
            wraper_fig(attendance_fig(attendance_data)), 
            wraper_fig(consumption_predict_fig(predict_cnsumption))
            ]


def init_stu_dash(server):
    app = Dash(
        __name__,
        server=server,
        url_base_pathname='/student_info/'
        )

    app.layout = create_layout()
    
    register_callbacks(app)

    return app